"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight } from "lucide-react"
import Link from "next/link"

const slides = [
  {
    id: 1,
    image:'https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749621599170.jpg',
    // image:
    //   "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E8%BD%AE%E6%92%AD%E5%9B%BE2.jpg-F1daptGxXg2EpkCS04ly5GfjwIz9SL.jpeg",
    alt: "考前练题库 - 立即前往，勤学苦练，高分相见",
    link: "/practice",
  },
  {
    id: 2,
    image:'https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749621466977.jpg',
    // image:
    //   "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E8%BD%AE%E6%92%AD%E5%9B%BE.jpg-43d5aG4nsba5leSEzWJ1eXhtRzCnpD.jpeg",
    alt: "我要上课 - 聆听业内专家解惑",
    link: "/courses",
  },
  {
    id: 3,
    image:'https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749621709438.jpg',
    // image:
    //   "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E8%BD%AE%E6%92%AD%E5%9B%BE.jpg-43d5aG4nsba5leSEzWJ1eXhtRzCnpD.jpeg",
    alt: "我要考试 - 聆听业内专家解惑",
    link: "/courses",
  },
]

export default function Carousel() {
  const [current, setCurrent] = useState(0)


  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((current) => (current + 1) % slides.length)
    }, 60000)
    // 调整轮播图播放速度
    return () => clearInterval(timer)
  }, [])

  const nextSlide = () => {
    setCurrent((current + 1) % slides.length)
  }

  const prevSlide = () => {
    setCurrent((current - 1 + slides.length) % slides.length)
  }

  return (
    <div className="bg-gray-100 py-6">
      {/* container宽度限制 */}
      <div className=" mx-auto px-4 -mt-3">
        <div className="relative h-[350px] sm:h-[180px] md:h-[200px] lg:h-[320px] overflow-hidden rounded-lg shadow-md">
          {slides.map((slide, index) => (
            <Link
              key={slide.id}
              href={slide.link}
              className={`absolute inset-0 transition-opacity duration-700 ${
                index === current ? "opacity-100" : "opacity-0"
              }`}
            >
              <div className="relative w-full h-full">
                <Image
                  src={slide.image || "/placeholder.svg"}
                  alt={slide.alt}
                  fill
                  // className="object-contain"
                  className="object-cover" // 使用 object-cover 铺满容器
                  priority={index === 0}
                />
              </div>
            </Link>
          ))}

          <button
            onClick={prevSlide}
            className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/20 rounded-full flex items-center justify-center hover:bg-black/30 transition-colors"
            aria-label="Previous slide"
          >
            <ChevronLeft className="w-6 h-6 text-white" />
          </button>

          <button
            onClick={nextSlide}
            className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/20 rounded-full flex items-center justify-center hover:bg-black/30 transition-colors"
            aria-label="Next slide"
          >
            <ChevronRight className="w-6 h-6 text-white" />
          </button>

          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
            {slides.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrent(index)}
                className={`w-2 h-2 rounded-full transition-colors ${index === current ? "bg-white" : "bg-white/50"}`}
                aria-label={`Go to slide ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

